<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in">
      <div class="cornerComment-in-title">
        <span class="tab-box">
          <i :class="{active: tabActive==1}" @click="tabActive=1">游园活动看板</i>
          <i :class="{active: tabActive==2}" @click="tabActive=2" v-if="picMap">游园地图</i>
        </span>
        <span><components is="Screenfull" ref="Screenfull"></components></span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody apply-box-left-from">
        <div class="boardBody" style="flex-direction: column;" v-if="tabActive==1">
          <div class="boardBody-list">
            <el-form label-width="110px" ref="editForm" v-if="detailData">
              <el-row :gutter="10">
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="游园名称：">
                    {{ detailData.title }}
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="游园时间：">
                    {{ detailData.start_time }}至{{ detailData.end_time }}
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4">
                  <el-form-item label="报名人数：">
                    <span class="pointNumber-list">{{ userData.count }}</span>人
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4">
                  <el-form-item label="已完成人数：">
                    <span class="pointNumber-list success-project">{{ userData.success }}</span>人
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4">
                  <el-form-item label="完成度：">
                    <span class="pointNumber-list success-project">{{ userData.degree }}</span>%
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4">
                  <el-form-item label="项目数：">
                    <span class="pointNumber-list">{{ projectOptionData.count }}</span>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4">
                  <el-form-item label="已完成项目数：">
                    <span class="pointNumber-list success-project">{{ projectOptionData.success }}</span>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4">
                  <el-form-item label="完成度：">
                    <span class="pointNumber-list success-project">{{ projectOptionData.degree }}</span>%
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div class="num-active-line">
              <el-row :gutter="10">
                <el-col :span="24" :xs="8" :sm="6" :md="4" :lg="6" :xl="6" v-for="item in arryList" :key="item.id">
                  <div class="num-active-line-list">
                    <div class="small-line-title-box">
                      <i class="small-line-title">签到</i>
                      <count-to :startVal='item.sign' :endVal='item.signNumber' :duration='1000'></count-to>
                      <i class="small-line-title">人</i>，<em class="small-line-title">完成 <i>{{ item.degree }}</i>%</em>
                    </div>
                    <p>{{ item.title }}</p>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="tagBox">
            <el-form class="tagBoxFrom">
              <el-form-item label="签到人：" v-if="userList.length">
                <el-tag v-for="(item,index) in userList" :key="index">{{item.name}}{{item.classes ? '('+item.classes.class_name+')' : ''}}</el-tag>
              </el-form-item>
              <el-form-item label="签到人：" v-else>
                暂无签到人...
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="boardBody" v-if="tabActive==2">
          <img :src="`${$openBASE_URL('img')}${picMap}`" class="mapPicLine">
        </div>
      </div>
      <!--      <div class="cornerComment-in-footer">-->
      <!--        <el-button @click.native="closePOpup" size="small">返回</el-button>-->
      <!--      </div>-->
    </div>
  </div>
</template>

<script>
import countTo from 'vue-count-to'
import {garden_party_Detail} from '@/api/admin/school'

export default {
  props: ['visible', 'detailId'], // recruitmentType examine 审核
  components: {countTo},
  data() {
    return {
      dialogVisible: false,
      timerShipInfo: null,
      detailData: null,
      arryList: [],
      userData: {
        count: 0,
        success: 0,
        degree: 0
      },
      projectOptionData: {
        count: 0,
        success: 0,
        degree: 0
      },
      tabActive: 1,
      picMap: '',
      userList:[]
    }
  },
  watch: {
    visible() {
      let that = this
      this.dialogVisible = this.visible
      if (this.visible) {
        // that.getDetail()
        this.getDetail('init')
        this.timerShipInfo = setInterval(() => {
          this.getDetail()
        }, 3000);
      } else {
        this.arryList = []
        this.detailData = null
        this.tabActive = 1
        this.picMap = ''
        this.userList = []
        clearInterval(that.timerShipInfo)
      }
    }
  },
  created() {
  },
  methods: {
    getDetail(option) {
      let n = this
      garden_party_Detail({id: this.detailId}).then(res => {
        let success_option = 0
        this.picMap = res.vo.pic
        this.userList = res.vo.user_list
        for (let index in res.vo.list) {
          let item = res.vo.list[index]
          if (option === 'init') {
            item.sign = 0
            item.signNumber = item.number
            item.degree = ((parseInt(item.number) / parseInt(res.vo.number)) * 100).toFixed(1)
          } else {
            if (n.arryList.length) {
              let list_ = JSON.parse(JSON.stringify(n.arryList[index]))
              list_.sign = list_.signNumber
              list_.signNumber = item.number
              list_.degree = ((parseInt(item.number) / parseInt(res.vo.number)) * 100).toFixed(1)
              if (Number(item.number) === Number(res.vo.number)) {
                success_option = success_option + 1
              }
              n.$set(n.arryList, index, list_)
            }
          }
        }
        this.userData = JSON.parse(JSON.stringify(
            {
              count: res.vo.number,
              success: res.vo.end_number,
              degree: ((parseInt(res.vo.end_number) / parseInt(res.vo.number)) * 100).toFixed(1)
            }
        ))
        this.projectOptionData = JSON.parse(JSON.stringify({
          count: res.vo.option_number,
          success: success_option,
          degree: ((parseInt(success_option) / parseInt(res.vo.option_number)) * 100).toFixed(1)
        }))
        if (option === 'init') {
          res.vo.start_time = res.vo.start_time.split(' ')[0]
          res.vo.end_time = res.vo.end_time.split(' ')[0]
          this.detailData = res.vo
          this.arryList = res.vo.list
        }
      })
    },
    // 关闭弹窗
    closePOpup() {
      this.$refs.Screenfull.closeScreenfull();
      this.$emit('update:visible', false)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },

  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 99%;
  height: 99%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.boardBody {
  display: flex;
}

.boardBody-list {
  padding-bottom: 10px;
  width: 100%;
}

.num-active-line {
  width: 100%;
}

.num-active-line-list {
  border: 1px solid #ddd;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: 0 4px 6px #ccc;
}

.num-active-line-list:nth-child(2), .num-active-line-list:nth-child(3) {
  margin-left: 20px;
}

.num-active-line-list span {
  font-size: 64px;
  font-weight: bold;
  color: #ef6f14;
  text-shadow: 1px 1px 1px #9a4009;
}

.num-active-line-list p {
  font-size: 20px;
  width: 100%;
  background: #3e89ff;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #fff;
}

.pointNumber-list {
  /*color: red;*/
  font-size: 64px;
  font-weight: bold;
  color: #006dcd;
}

.pointNumber-list.success-project {
  color: #4caf50;
}

.small-line-title-box {
  padding: 30px 0;
  display: flex;
  align-items: baseline;
}

.small-line-title {
  font-size: 12px;
  font-style: normal;
  padding: 0 10px;
}

em.small-line-title i {
  font-size: 64px;
  color: #ef6f14;
  font-style: normal;
  text-shadow: 1px 1px 1px #9a4009;
}

.tab-box i {
  font-style: normal;
  color: #999;
  padding: 0 10px;
  cursor: pointer;
}

.tab-box i.active {
  color: #006dcd;
  text-decoration: underline;
  font-weight: bold;
}
.mapPicLine{
  width: 100%;
  height: 100%;
  display: block;
}
.tagBox{
  display: flex;
  align-items: center;
}
.tagBoxFrom{
  width: 50%;
}
.tagBoxFrom .el-tag{
  margin-right: 10px;
  font-size: 18px;
}
</style>
